<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>

    <div id="app"></div>

    <script src="../js/react.development.js"></script>
    <script src="../js/react-dom.development.js"></script>
    <script src="../js/babel.min.js"></script>
    <script src="../js/prop-types.js"></script>


    <script type="text/babel">

        // 原型- 保真图 - htmlcssjs - react（jsx） - class component(数据 视图 行为) - 组件拆分（多个子组件）
        class App1 extends React.Component {
            // 数据
            state = {
                tasks: [], // 00ff11 []
                task: ''
            }

            //行为事件
            // 同步任务内容
            handleChange = (e) => {
                this.setState({
                    task: e.target.value
                }, () => {
                    // console.log('task',this.state.task);
                })
            }

            // 添加任务
            handleAddTask = () => {
                const { task, tasks } = this.state
                if (!task) return
                //添加数据 : 同步到state  00ff11
                tasks.unshift({ task: task, date: new Date().toLocaleDateString() })
                console.log(this.state);

                //视图同步
                this.setState({
                    task: '', //清空输入
                    tasks: tasks
                })

                // 性能优化：如果setState{key:value} value值不变 不触发更新
            }

            // 删除任务
            handleDeleteTask(index) {
                const { tasks } = this.state
                //数组删除  [{1},{2},{3},{4}]
                tasks.splice(index, 1)
                console.log(this.state);

                this.setState({
                })

            }

            //视图
            render() {
                const { tasks } = this.state
                return (
                    <div>
                        <h1> Today Tasks :{tasks.length}</h1>
                        <div>
                            <input type='text' value={this.state.task} onChange={this.handleChange} />
                            <button onClick={this.handleAddTask}>add task</button>
                        </div>
                        <div>
                            <ul>

                                {
                                    tasks.map((item, index) => {
                                        return (
                                            <li key={index}>
                                                <span>{index + 1}--{item.task}--{item.date}</span>{' '}
                                                <button onClick={this.handleDeleteTask.bind(this, index)}>delete</button>
                                            </li>
                                        )
                                    })
                                }


                            </ul>
                        </div>
                    </div>
                )
            }
        }

        /*
          数据 视图 行为
         * 
         * 01 组件分析 （细粒度组件 便于维护）
         * App 组件
         *  ---AddTask 添加
         *  ---TaskList 列表
         *     ----TaskItem 列表项
         * 组件定义： 函数组件 or 类组件
         * 依据是否有状态 ： 有=>类组件 （容器组件） ；没有 函数组件 （UI组件）
         * 
         * 02 数据位置
         * 条件 ： 数据是某个组件自己用=>定义到某个组件里 ： 添加组件 task
         * 条件 ： 数据是多个组件共同用=> 自定在多个组件共同父组件 => tasks[] 放在App里
         * 
         * 03 行为位置
         *  视图 - 行为 - 数据 - render(重新渲染)
         *   数据在哪个组件  对应的数据行为就在哪个组件 =>方便直接调用setState直接修改数据
         * 
         * 04 开发
         *  定义组件 => 组件组合
         *  定义数据
         *  定义行为
            组件通信
         */

        class AddTask extends React.Component {
            state = {task:''} 

              // 同步任务内容
              handleChange = (e) => {
                this.setState({
                    task: e.target.value
                })
            }

             // 添加任务
             handleAddTask = () => {
                const { task} = this.state
                const { addTask } = this.props
                if (!task)return

                //添加数据 : 同步到state  00ff11
                let taskNew = { task: task, date: new Date().toLocaleDateString() }
                addTask(taskNew)

                //视图优化
                this.setState({
                    task: '' //清空输入
                })
            }

            render() {
                return (
                    <div>
                        <input type='text'  value={this.state.task} onChange={this.handleChange}/>
                        <button onClick={this.handleAddTask}>add task</button>
                    </div>
                )
            }
        }

        function TasksList(props) {
            const {tasks,deleteTask} = props
            return (
                <div>
                    <ul>
                        {
                            tasks.map((item,index)=>{
                                return <TaskItem  key={index} item={item} index={index} deleteTask={deleteTask}/>
                            })
                        }
                    </ul>
                </div>
            )
        }

        function TaskItem(props) {
            const {item,index,deleteTask} = props
            const {task,date} = item
            
            // const handleDelete=function(){ //00ff33
            //     deleteTask(index)
            // }
            const handleDelete=()=>{ //00ff33
                deleteTask(index)
            }
            return (
                <li >
                    <span>{index+1}-{task}--{date}</span>{' '}
                    <button onClick={handleDelete}>delete</button>
                </li>
            )
        }

        class App extends React.Component {
            state={tasks: []}
            
            addTask =(task)=>{ //00ff11
                if(!task) return 
                const {tasks} = this.state
                tasks.unshift(task)

                this.setState({
                    tasks
                })
            }

            deleteTask = (index)=>{ //00ff22
                const { tasks } = this.state

                //数组删除  [{1},{2},{3},{4}]
                tasks.splice(index, 1)

                this.setState({
                    tasks
                })
            }


            render() {
                return (
                    <div>
                        <h1> Today Tasks : {this.state.tasks.length}</h1>
                        <AddTask addTask={this.addTask}/>
                        <TasksList tasks={this.state.tasks} deleteTask={this.deleteTask}/>
                    </div>
                )
            }
        }

        ReactDOM.render(<App />, document.getElementById('app'))
    </script>
</body>

</html>